<template>
	<view class="tabs s-flex-r-s-c">
		<view v-for="(item,index) in tabs" class="tab-item flex1" @click="tabClick(index)"
			:class="value==index?'activeTib':''">{{item.name}}</view>
	</view>
</template>

<script>
	export default {
		name: "myTab",
		props: {
			tabs: { // 支持格式: ['全部', '待付款'] 或 [{name:'全部'}, {name:'待付款'}]
				type: Array,
				default () {
					return []
				}
			},
			value: { // 当前显示的下标 (使用v-model语法糖: 1.props需为value; 2.需回调input事件)
				type: [String, Number],
				default: 0
			},
		},
		data() {
			return {

			};
		},
		methods: {
			tabClick(i) {
				if (this.value != i) {
					this.$emit("input", i);
					this.$emit("change", {i,...this.tabs[i]});
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.tabs {
		background: #ffffff;
		width: 690rpx;
		margin: 20rpx auto 0;
		border: 1rpx solid $uni-color-primary;
		border-right: none;
		.tab-item {
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 26rpx;
			color: #333333;
			border-right: 1rpx solid $uni-color-primary;
		}

		.activeTib {
			color: #ffffff;
			background: $uni-color-primary;
		}
	}
</style>